<template>
    <div class="container">
        <div class="title">
            <img src="../img/dot.png" alt="">
            报警参数分析
        </div>
        <div class="content" >
            <div class="left">
                <div class="head">
                    <img src="../img/arrow.png" alt="">
                    主要报警
                </div>
                <div class="l-bottom">
                    <div class="date">
                        <span>时间：</span>
                        <el-date-picker v-model="value2" type="monthrange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="pickerOptions" width="150px">
                        </el-date-picker>
                    </div>

                    <div id="chart" class="chart">

                    </div>
                    <div class="b-table">
                        <el-table :data="tableData" border style="width: 80%;margin: 0 auto; height:30vh">
                            <el-table-column prop="params" label="参数">
                            </el-table-column>
                            <el-table-column prop="warning" label="报警数" width="70">
                            </el-table-column>
                            <el-table-column prop="month" label="最高月份" width="80">
                            </el-table-column>
                            <el-table-column prop="maxWarn" label="高报" width="70">
                            </el-table-column>
                            <el-table-column prop="minWarn" label="低报" width="70">
                            </el-table-column>
                            <el-table-column prop="wave" label="波动">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="r-title">
                    密闭站与管汇采出液液量、温度报警分析
                </div>
                <div class="r-content">
                    <div class="chart1" id="chart1"></div>
                    <div class="chart2" id="chart2"></div>
                    <div class="chart3" id="chart3"></div>
                    <div class="chart4" id="chart4"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'ParamsDetect',
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: '',
            options: {
                dataset: {
                    source: [
                        ['score', 'amount', 'product'],
                        [89.3, 58212, '喷淋空冷器变频频率'],
                        [57.1, 78254, '值17喷淋空冷器变频频率'],
                        [74.4, 41032, '值16喷淋空冷器变频频率'],
                        [19.6, 91852, '值12喷淋空冷器变频频率'],
                        [10.6, 101852, '喷淋塔塔釜液位'],
                        [19.6, 91852, '压缩机主电机电流'],
                        [19.6, 91852, '喷淋塔塔釜温度'],
                        [57.1, 78254, '喷淋塔差压'],
                        [10.6, 101852, '器进口总管温度'],
                    ]
                },
                color: '#05b2d1',
                textStyle: {
                    color: '#fff'
                },
                grid: { containLabel: true },
                xAxis: { name: 'amount' },
                yAxis: { type: 'category' },
                // visualMap: {
                //     orient: 'horizontal',
                //     left: 'center',
                //     min: 10,
                //     max: 100,
                //     text: ['High Score', 'Low Score'],
                //     // Map the score column to color
                //     dimension: 0,
                //     inRange: {
                //         color: ['#05b2d1']
                //     }
                // },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            x: 'amount',
                            // Map the "product" column to Y axis
                            y: 'product'
                        }
                    }
                ]
            },
            option1: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text:'集油线温度低报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color:'#5087ec',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            option2: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text:'集油线温度高报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color:'#68bbc4',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            option3: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text:'计量温度低报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color:'#4df755',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            option4: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text:'计量温度高报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color:'#f7b153',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            tableData: [{
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            },  {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            },]
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            var chartDom = document.getElementById('chart');
            var chart = echarts.init(chartDom);

            var chartDom1 = document.getElementById('chart1');
            var chart1 = echarts.init(chartDom1);

            var chartDom2 = document.getElementById('chart2');
            var chart2 = echarts.init(chartDom2);

            var chartDom3 = document.getElementById('chart3');
            var chart3 = echarts.init(chartDom3);

            var chartDom4 = document.getElementById('chart4');
            var chart4 = echarts.init(chartDom4);

            chart.setOption(this.options, true);
            chart1.setOption(this.option1, true);
            chart2.setOption(this.option2, true);
            chart3.setOption(this.option3, true);
            chart4.setOption(this.option4, true);
            window.addEventListener('resize', function () {
                chart.resize()
                chart1.resize()
                chart2.resize()
                chart3.resize()
                chart4.resize()
            })
        }
    }
}
</script>
<style lang='scss' scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: #0b1539;
}

.title {
    background-image: url('../img/headbg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 5vh;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 60px;
    font-style: italic;
    display: flex;
    align-items: center;
    

    img {
        margin: 0 10px;
    }
}

.content {
    display: flex;
    height: 95vh;

    .left {
        width: 40%;
        height: 100%;

        // background-color: #fff;
        .head {
            background-image: url('../img/titlebg.png');
            background-repeat: no-repeat;
            background-size: cover;
            height: 40px;
            color: #00ffff;
            font-weight: 700;
            line-height: 40px;
            font-size: 20px;
            display: flex;
            padding-left: 40px;
            align-items: center;
            margin-bottom: 10px;
            margin-top: 10px;
            img {
                margin: 0 10px;
            }
        }

        .l-bottom {
            height: 100%;
            background-color: #fff;
            background-image: url('../img/framebg.png');
            background-repeat: no-repeat;
            background-size: 100% calc(100% - 60px);
            padding-top: 25px;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            height: 100%;
            .date {
                width: 400px;
                margin: 0 30px;
            }

            .chart {
                width: 100%;
                height: 50%;
                // background-color: red;
            }
        }
    }

    .right {
        width: 60%;
        height: 100%;

        // background-color: black;
        // margin-top: 40px;
        .r-title {
            text-align: center;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            margin-top: 40px;
            margin-bottom: 20px;
        }

        .r-content {
            display: flex;
            justify-content: space-evenly;
            // margin-top: 20px;
            flex-wrap: wrap;
            height: 100%;
            div {
                // margin-top: 5px;
                background-image: url('../img/chartbg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 45%;
                height: 40%;
            }
        }
    }
}

::v-deep .el-range-editor--medium.el-input__inner {
    height: 35px;
}

::v-deep .el-date-editor--monthrange.el-input,
.el-date-editor--monthrange.el-input__inner {
    width: 200px;
    background-color: transparent;
    border: 1px solid #69abff;
}

::v-deep .el-range-editor--medium .el-range-input {
    background-color: transparent;
    color: #69abff;
}

::v-deep .el-range-input::placeholder {
    color: #69abff;
}

::v-deep .el-range-separator {
    color: #fff;
}
</style>